<template>
  <div class="app-container container">
      <div style="width: 47%;height:500px;" class="card-box">
        <v-chart

            ref="lineChar"
            :option="chartLineOptions2"
            width="100%"
            height="100%"
        />
      </div>
    <div style="width: 47%;height:500px;" class="card-box">
      <v-chart
          ref="barChar"
          :option="chartOptions"
          width="100%"
          height="100%"
      />
    </div>
    <div style="width: 47%;height:500px;" class="card-box">
      <v-chart
          ref="pieChar"
          :option="pieOptions"
          width="100%"
          height="100%"
      />
    </div>
    <div style="width: 47%;" class="card-box">
      <el-table :data="state.tableData.data"
                v-loading="state.tableData.loading"
                stripe
                border>
        <el-table-column v-for="column in state.tableData.header"  :min-width="column.width" align="center" :key="column.column" :label="column.columnName" :prop="column.column">
          <el-table-column  v-if="column.children?.length > 0" v-for="(item,index) in column.children" align="center" :min-width="item.width" :key="index" :label="item.columnName" :prop="item.column"></el-table-column>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import RecursiveTableHeader from "@/components/RecursiveTableHeader";

const chartOptions = ref({
  title: {
    text: '发电量预测',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
    data: ['中长期仅新建四代堆-核能发电量（万亿千瓦时）', '中长期新建三代和四代堆-核能发电量（万亿千瓦时）'],
    right: 'right'
  },
  xAxis: {
    type: 'category',
    data: ['2030', '2040', '2050', '2060']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '中长期仅新建四代堆-核能发电量（万亿千瓦时）',
      type: 'bar',
      data: [0.89, 1.96, 3.16, 3.44]
    },
    {
      name: '中长期新建三代和四代堆-核能发电量（万亿千瓦时）',
      type: 'bar',
      data: [0.89, 1.99, 3.24, 3.53]
    }
  ]
});

const pieOptions = ref({
  title: {
    text: '核能供汽量占比',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  series: [
    {
      name: '核能供汽量占比',
      type: 'pie',
      radius: '50%',
      data: [
        {value: 0.88, name: '2030年-中长期仅新建四代堆-供汽量占比'},
        {value: 5.01, name: '2040年-中长期仅新建四代堆-供汽量占比'},
        {value: 10.05, name: '2050年-中长期仅新建四代堆-供汽量占比'},
        {value: 13.56, name: '2060年-中长期仅新建四代堆-供汽量占比'},
        {value: 0.88, name: '2030年-中长期新建三代和四代堆-供汽量占比'},
        {value: 6.06, name: '2040年-中长期新建三代和四代堆-供汽量占比'},
        {value: 12.26, name: '2050年-中长期新建三代和四代堆-供汽量占比'},
        {value: 16.16, name: '2060年-中长期新建三代和四代堆-供汽量占比'}
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
});
/**
 * 定义表头属性映射关系
 */
const property = {
  prop: "column",
  label: "columnName",
  width: "width",
  children: "children",
};
const state = reactive({
  tableData: {
    loading: false,
    header: [
      {
        column: "dim1",
        columnName: "堆型",
        width: "100px",
        children: [],
      },
      {
        column: "dim3",
        columnName: "机组寿命",
        width: "100px",
        children: [],
      },
      {
        column: "dim4",
        columnName: "装机成本",
        width: "100px",
        children: [],
      },
      {
        column: "2030",
        columnName: "2030年",
        width: "560px",
        children: [
          {
            column: "kf12030",
            columnName: "核电装机容量(亿千瓦)",
            width: "280px",
            children: [],
          }
        ],
      }, {
        column: "2040",
        columnName: "2040年",
        width: "560px",
        children: [
          {
            column: "kf12040",
            columnName: "核电装机容量(亿千瓦)",
            width: "280px",
            children: [],
          }
        ],
      }, {
        column: "2050",
        columnName: "2050年",
        width: "560px",
        children: [
          {
            column: "kf12050",
            columnName: "核电装机容量(亿千瓦)",
            width: "280px",
            children: [],
          }
        ],
      }, {
        column: "2060",
        columnName: "2060年",
        width: "560px",
        children: [
          {
            column: "kf12060",
            columnName: "核电装机容量(亿千瓦)",
            width: "280px",
            children: [],
          }
        ],
      }

    ],
    data: [{
      dim1: '二代及三代大堆',
      dim3: '60年',
      dim4: '200亿',
      kf12030: '1.08',
      kf12040: '0.00',
      kf12050: '0.01',
      kf12060: '0.01'
    }, {
      dim1: '三代小堆',
      dim3: '60年',
      dim4: '400亿',
      kf12030: '2.46',
      kf12040: '0.02',
      kf12050: '0.01',
      kf12060: '0.01'
    }, {
      dim1: '四代堆（高温堆）',
      dim3: '40年',
      dim4: '100亿',
      kf12030: '3.23',
      kf12040: '0.18',
      kf12050: '0.74',
      kf12060: '0.01'
    }, {
      dim1: '四代堆（快堆）',
      dim3: '30年',
      dim4: '80亿',
      kf12030: '3.23',
      kf12040: '0.18',
      kf12050: '1.17',
      kf12060: '0.01'
    }]
  }
});

const chartLineOptions2 = ref({
  title: {
    text: '核能供汽量',
    left: 'center'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['中长期仅新建四代堆-核能供汽量（万吨标煤）', '中长期新建三代和四代堆-核能供汽量（万吨标煤）'],
    right: 'right'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['2030', '2040', '2050', '2060']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '中长期仅新建四代堆-核能供汽量（万吨标煤）',
      type: 'line',
      stack: '中长期仅新建四代堆-核能供汽量（万吨标煤）',
      data: [370, 1507, 2041, 2253]
    },
    {
      name: '中长期新建三代和四代堆-核能供汽量（万吨标煤）',
      type: 'line',
      stack: '中长期新建三代和四代堆-核能供汽量（万吨标煤）',
      data: [370, 1825, 2489, 2685]
    }
  ]
});
</script>

<style scoped>
.container {
  display: flex;
  height: 100%;
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 2px; /* 子元素之间的间距 */
}

.card-box {
  padding: 1rem;
  box-shadow: 0px 0px 6px 6px rgba(183, 183, 183, 0.28);
  margin: 0 1.5rem 1rem;
  border-radius: 4px;
  background-color: rgba(83, 168, 255, 0.28);
}


</style>